<template>
  <div class="Login">

    <div class="form-tt">
      <span v-on:click="gotoLogin">手机号快捷登录</span> | <span class="active">账号密码登录</span>
    </div>
    <div class="login-from">
      <div class="list">
        <input type="tel" class="txt" v-model="phone" placeholder="请输入您手机号" />
      </div>
      <div class="list clearfix">
        <input type="text" v-if="showpass" class="txt" v-model="password" placeholder="请输入6-20位密码" />
        <input type="password" v-else class="txt" v-model="password" placeholder="请输入6-20位密码" />

        <i class="ico show" v-if="showpass" v-on:click="hide"><img src="../assets/show.png" alt=""></i>
        <i class="ico hide" v-else v-on:click="show"><img src="../assets/hide.png" alt=""></i>

      </div>
    </div>
    <div class="clearfix list-cl">
      <div class="fl"><a href="#/reg">立即注册</a></div>
      <div class="fr"><a href="#/forgetpassword">忘记密码</a></div>
    </div>
    <div class="error-msg">{{errorMsg}}</div>
    <div class="next-btn">
      <mt-button type="danger" size="large" v-on:click="loginFn">登录</mt-button>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Login2',
    data () {
      return {
        phone:'',
        password:'',
        errorMsg:'',
        showpass:false
      }
    },
    methods:{
      show:function(){
        this.showpass = true;
      },
      hide:function(){
        this.showpass = false;
      },
      gotoLogin(){
        this.$router.push({path:'/login',query: {redirect: this.$route.query.redirect}});
      },
      loginFn:function(){

        if(this.phone == ''){
          this.errorMsg = '手机号不能为空';
          return;
        }

        if(this.password == ''){
          this.errorMsg = '密码不能为空';
          return;
        }

        if(!utilities.isMobile(this.phone)) {
          this.errorMsg = '请输入正确的手机号'
          return;
        }
        else{
          this.errorMsg = '';
        }

        if(!utilities.isPasswordValid(this.password)){
          this.errorMsg = '请输入6-20位密码';
          return;
        }
        else{
          this.errorMsg = ''
        }
        this.errorMsg = '';

        var loginData = {};
        loginData.phone = this.phone;
        loginData.password = this.password;
        loginData.openid = localStorage.openid || '';
        var _this = this;

        $.ajax({
          type:'post',
          url: RouteMap.login2,
          data: loginData,
          success:function(res){
            if(res.code == 200){

              var userData = res.data;
              userData.login = "1";

              localStorage.setItem('user',JSON.stringify(userData));
              sessionStorage.setItem('user',JSON.stringify(userData));

              if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
                _this.$router.push({path:''+_this.$route.query.redirect});
              }
              else{
                _this.$router.push({path:'/'});
              }

            }
            else{
              Toast(res.msg)
            }
          }
        })

      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .form-tt{
    font-size: .6rem;
    color: #b2b2b2;
    text-align: center;
    padding: 1.4rem 0 1.2rem;
  }
  .form-tt span{
    padding: 0 1rem;
  }
  .form-tt .active{
    color: #36231d;
  }
  .form-tt a{
    color: #b3b3b3;
  }
  .list{
    padding:0 1.2rem;
    margin-bottom: .7rem;
    position: relative;
  }
  .txt{
    background: #f2f2f2;
    border-radius: 1rem;
    padding: .2rem .8rem;
    width: 12rem;

    font-size: .5rem;
  }
  .fl .txt{
    width: 7rem;
  }
  .btn{
    background: red;
    width: 4rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 1rem;
  }

  .mint-button--danger{
    border-radius: 1rem;
    padding: 0 .8rem;
  }
  .tip{
    text-align: center;
    font-size: .5rem;
    color: #808080;
  }
  .next-btn{
    padding: 0 1.2rem;
  }
  .from-box{ padding: .67rem; padding-top: 3.33rem; }
  .btn-box{ padding-top: 1rem; }
  .ico{
    position: absolute;
    right: 1.8rem;
    top: .55rem;
  }
  .ico img{
    width: .8rem;
  }
  .list-cl{
    padding: 0 1.2rem;
  }
  .list-cl a{
    color: #36231d;
  }

</style>
